<template>
  <div id="cars">
    <div class="search_box">
      <el-input
        v-model="searchContent.project_name"
        placeholder="项目名"
      ></el-input>
      <el-input
        v-model="searchContent.receivable"
        placeholder="开票单位"
      ></el-input>
      <el-input
        v-model="searchContent.payable"
        placeholder="收票单位"
      ></el-input>
      <el-date-picker
        v-model="searchContent.create_time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button @click="resetList">重置</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="h"
      border
      :span-method="objectSpanMethod"
    >
      <el-table-column
        prop="project_name"
        label="项目"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        width="120"
        prop="create_time"
        label="日期"
        align="center"
        :formatter="timestampToTime"
      >
      </el-table-column>
      <el-table-column
        prop="abstract"
        label="业务摘要"
        align="center"
        width="200px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="receivable"
        label="开票单位"
        align="center"
        width="200px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="payable"
        label="收票单位"
        align="center"
        width="200px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="invoicing_price" label="开票金额" align="center">
      </el-table-column>
      <el-table-column prop="taxrate" label="税率(%)" align="center">
      </el-table-column>
      <el-table-column prop="excluding_tax" label="不含税金额" align="center">
      </el-table-column>
      <el-table-column prop="tax_amount" label="税额" align="center">
      </el-table-column>
      <el-table-column prop="invoice_type" label="发票类型" align="center">
      </el-table-column>
      <el-table-column
        prop="invoice_num"
        label="发票号码"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="invoice_code"
        label="发票代码"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="invoice_content"
        label="发票内容"
        align="center"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="invoice_date" label="交票日期" align="center">
      </el-table-column>
      <el-table-column
        prop="invoice_remark"
        label="备注"
        align="center"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="editIncom(scope.row)">撤回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_table">
      <span style="line-height: 35px; margin-right: 30px"
        >总开票金额:
        <span style="color: red">{{ price1.toFixed(4) }}</span></span
      >
      <span style="line-height: 35px; margin-right: 30px"
        >总不含税金额:
        <span style="color: red">{{ price2.toFixed(4) }}</span></span
      >
      <span style="line-height: 35px; margin-right: 30px"
        >总税额: <span style="color: red">{{ price3.toFixed(4) }}</span></span
      >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchContent.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB, editDB } from "@/db/indexdb";
import { searchTable } from "@/db/search";

export default {
  data() {
    return {
      activeName: "1",
      tableData: [],
      searchContent: {
        project_name: "",
        payable: "",
        receivable: "",
        create_time: [],
        page: 1,
        size: 10,
        total: 0,
      },
      h: "",
      price1: 0,
      price2: 0,
      price3: 0,
    };
  },
  created() {
    openDB("car", "list").then(() => {
      this.getList();
    });
    this.h = document.documentElement.offsetHeight - 270;
  },
  methods: {
    editIncom(row) {
      console.log(row, "row");
      this.$confirm("确定撤回本次开票记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 收付款
          getDataByKey("list", "收付款表").then((res) => {
            let result = res?.data.filter((item) => {
              return item.id == row.f_id;
            })[0];
            result.invoicing =
              Number(result.invoicing || 0) - Number(row.invoicing_price || 0);
            editDB("list", "收付款表", result).then(() => {
              // 收付款记录
              deleteDB("list", "发票登记表", row.id).then(() => {
                this.getList();
                this.$message({
                  type: "success",
                  message: "已撤回",
                });
              });
            });
          });

          // 账户余额
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetList() {
      this.searchContent = {
        project_name: "",
        payable: "",
        receivable: "",
        create_time: [],
        page: 1,
        size: 10,
        total: 0,
      };
      this.getList();
    },
    getList() {
      getDataByKey("list", "发票登记表").then((res) => {
        let result = (res?.data || []).filter((item) => {
          return item.item_type == 1;
        });
        let { total, list, totalList } = searchTable(
          result,
          this.searchContent,
          1
        );
        this.searchContent.total = total;
        this.tableData = list;
        console.log(totalList);
        let price1 = 0;
        let price2 = 0;
        let price3 = 0;
        totalList.map((item) => {
          price1 = price1 + Number(item.invoicing_price || 0);
          price2 = price2 + Number(item.excluding_tax || 0);
          price3 = price3 + Number(item.tax_amount || 0);
        });
        this.price1 = price1;
        this.price2 = price2;
        this.price3 = price3;
      });
    },
    handleSizeChange(val) {
      this.searchContent.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchContent.page = val;
      this.getList();
    },
    timestampToTime(row) {
      var date = new Date(Number(row.id));
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var d = date.getDate();
      return y + "年" + m + "月" + d + "日";
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (
          rowIndex > 0 &&
          this.tableData[rowIndex].project_id ==
            this.tableData[rowIndex - 1].project_id
        ) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].project_id == row.project_id) {
              rowspan++;
            } else {
              break;
            }
          }
          return { rowspan: rowspan, colspan: 1 };
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.el-form {
  .el-select,
  .el-input,
  .el-date-editor {
    width: 160px;
  }
  .el-textarea {
    width: 700px;
  }
  .el-range-editor {
    width: 290px;
  }
}
.pro_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
